<template>
  <div class="email-container">
    <div class="item-top">
      <div class="title mt-16" ref="title">Snapshop Reports</div>
      <div class="filter-btns">
        <a-radio-group :value="notificationService.snapshotAction" @change="change">
          <a-radio value="AND">AND</a-radio>
          <a-radio value="OR">OR</a-radio>
        </a-radio-group>

      </div>

    </div>

    <div class="sub-title">可选</div>
    <a-transfer
    
     :rowKey="record => record.id"
      :data-source="snapshopList"
      :titles="['', '']"
      :render="(item) => item.templateName"
      :target-keys="targetKeys"
      :selected-keys="selectedKeys"
      :list-style="{
        width: '50%',
        height: '180px',
      }"
      @change="handleChange"
      @selectChange="handleSelectChange"
      @scroll="handleScroll"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    snapshopList: {
      type: Array,
      default: () => []
    },
    title: String
  },
  watch: {
    snapshopList: {
      deep: true,
      handler(n) {
        console.log("**2", n[0]);
      }
    }
  },
  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService'])
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      this.targetKeys = emailRow.snapshotList;
    }
  },
  methods: {
     getTitle(){
      return this.$refs.title.innerHTML
    },
    ...mapMutations('emailNotification', ['setState']),
    change(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, snapshotAction: e.target.value }});
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, snapshotList: nextTargetKeys }});
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    handleScroll() {}
  }
};
</script>
<style lang="less" scoped>
.container {
  margin: 20px 0;
  h4 {
    text-align: left;
    padding-left: 30px;
  }
}
</style>
